<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header>
          <div c1ass="top">
            <el-row>
              <el-col :span="9">
                <div class="header">
                  <div class="header_content">
                    <div class="logo_box">
                      <a class="topEdit_logo_a">
                        <div class="iconfont iconziyuan1 topEdit_logo"></div>
                      </a>
                      <el-divider direction="vertical" />
                      <a class="router-link-exact-active link-active">
                        <div class="iconfont iconziyuan iJournal_logo"></div>
                      </a>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="15">
                <el-menu
                  :default-active="activeIndex"
                  class="el-menu-demo"
                  mode="horizontal"
                  @select="handleSelect"
                >
                  <el-menu-item index="1">期刊详情查询</el-menu-item>
                  <el-divider direction="vertical" />
                  <el-menu-item index="1">AI智能选刊</el-menu-item>
                  <el-divider direction="vertical" />
                  <el-menu-item index="1">期刊解析与推荐</el-menu-item>
                  <el-divider direction="vertical" />
                  <el-menu-item index="1">itent查重</el-menu-item>
                  <el-divider direction="vertical" />
                  <el-menu-item index="1">关于我们</el-menu-item>
                  <el-divider direction="vertical" />
                  <el-menu-item
                    index="1"
                    style="background-color: #0fa4b3; color: white"
                    >登录/注册</el-menu-item>
                
                </el-menu>
              </el-col>
            </el-row>
          </div>
        </el-header>
        <el-main>
          <!-- 搜索区域 -->
          <el-row>
            <el-col :span="10">
              <el-input
             
                v-model="searchData"
                style="max-width: 600px;"
                placeholder="请输入内容"
                class="input-with-select"
                @input="cs"
                :input-style="{
                  height: '42px',
                }"
              >
                <template #prepend>
                  <el-select
                    v-model="select"
                    placeholder="学科分类"
                    style="width: 115px;height:100% "
                  >
                    <el-option label="ASSN" value="1" />
                    <el-option label="期刊名称" value="2" />
                    <el-option label="简称" value="3" />
                    <el-option label="学科分类" value="4" />
                  </el-select>
                </template>
                <template #append>
                  <el-button
                  @click="cs"
                    :icon="Search"
                    style="background-color: #0fa4b3; color: white;height: 100%;font-size: 20px;padding:0 20px;border-radius: 0;border:none;"
                    
                  />
                </template>
              </el-input>
            </el-col>
            <el-col :span="20">
              <el-row>
                <el-col :span="6">
                  <div class="grid-content ep-bg-purple">
                    <span>影响因子</span>
                    <el-input v-model="input" style="width: 52px" />-
                    <el-input v-model="input" style="width: 52px" />
                  </div>
                </el-col>
                <el-col :span="6">
                  <div
                    class="grid-content ep-bg-purple"
                    style="display: flex; font-size: 14px"
                  >
                    <span>JCR分区</span>
                    <el-select
                      v-model="value"
                      placeholder="不限"
                      size="large"
                      style="width: 100px; box-shadow: none"
                      class="selectnot"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content ep-bg-purple">
                    <span>分区</span>
                    <el-select
                      class="selectnot"
                      v-model="value"
                      placeholder="不限"
                      size="large"
                      style="width: 100px"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content ep-bg-purple">
                    <span>综述占比</span>
                    <el-select
                      class="selectnot"
                      v-model="value"
                      placeholder="不限"
                      size="large"
                      style="width: 100px"
                    >
                      <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <!-- 表格 -->
          <el-table
            v-loading="loading"
            class="cur-table-box"
            :data="tableData"
            :row-class-name="rowClassName"
            style="width: 85%; margin: 0 auto"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column width="240" label="期刊名称" align="center">
              <template #default="scope">
                <span data-v-7407557b="" class="full_name text_color_primary">
                  {{ scope.row.journalTitle }}</span
                >
                <div
                  data-v-7407557b=""
                  class="abbr text_color_secondary margin-top-10"
                >
                  {{ scope.row.abbrJournal }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="journalDb"
              label="数据库"
              sortable
              align="center"
            />
            <el-table-column
              prop="impactFactor_2019"
              label="影响因子"
              sortable
              align="center"
            />
            <el-table-column
              prop="quote_factor"
              label="引文指标"
              sortable
              align="center"
            />
            <el-table-column prop="jcrZone" label="jcr分区" align="center">
              <template #default="scope">
                <span v-if="scope.row.jcrZone == 8">Q1</span>
                <span v-else-if="scope.row.jcrZone == 4">Q2</span>
                <span v-else-if="scope.row.jcrZone === 2">Q3</span>
                <span v-else>Q4</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="subZone"
              label="国内分区"
              sortable
              align="center"
            >
              <template #default="scope">
                <span v-if="scope.row.subZone !== 0">
                  {{ scope.row.subZone }}区
                </span>
                <span v-else> - </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="annualPublication"
              label="年发文量"
              sortable
              align="center"
            >
              <template #default="scope">
                <span
                  v-if="
                    scope.row.annualPublication !== null &&
                    scope.row.annualPublication !== 0
                  "
                >
                  {{ scope.row.annualPublication }}
                </span>
                <span v-else> - </span>
              </template>
            </el-table-column>
            <el-table-column label="综述占比" sortable align="center">
              <template #default="scope">
                <span v-if="scope.row.totalReviewRatio !== null">
                  {{ (scope.row.totalReviewRatio * 1).toFixed(2) }}%
                </span>
                <span v-else> - </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="open_ratio"
              label="是否开源/开源占比"
              sortable
              align="center"
            >
              <template #default="scope">
                <span v-if="scope.row.open_ratio !== null">
                  {{ (scope.row.open_ratio * 1).toFixed(2) }}%
                </span>
                <span v-else> - </span>
              </template>
            </el-table-column>
            <el-table-column label="是否国产">
              <template #default="scope">
                {{ scope.row.isDomestic === 0 ? "否" : "是" }}
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div style="display: flex; justify-content: center">
            <el-pagination
              page-size="4"
              background
              layout="prev, pager, next"
              :total="allTotal"
              @current-change="currentChange"
            />
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getTableData } from "../api/index.js";
import { id } from "element-plus/es/locales.mjs";
const input = ref("");
// const options1 = reactive([
//   { value: "option1", label: "期刊名称1" },
//   { value: "option2", label: "期刊名称2" },
//   { value: "option3", label: "期刊名称3" },
// ]);
const options2 = reactive([
  { value: "option1", label: "Q1" },
  { value: "option2", label: "Q2" },
  { value: "option3", label: "Q3" },
  { value: "option3", label: "Q4" },
]);
const tableData = ref([]);
const allTotal = ref(0);
// console.log(tableData);

//搜索框
const select = ref("");
const searchData = ref("");
const selectData = {
  ISSN: "issn",
  期刊名称: "title",
  简称: "abbr",
  学科分类: "category",
};

const cs = () => {
  console.log("搜索类型:", select.value);
  console.log("搜索内容:", searchData.value);

  // 根据搜索类型和内容更新 payload
  payload.keywordType = select.value; // 搜索类型
  payload.keyword = searchData.value; // 搜索内容

  // 调用获取表格数据的函数
  gettableData();
};

const payload = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 3135,
  keywordType: "title",
  keyword: "",
  ifStart_2019: "",
  ifEnd_2019: "",
  ifStart: "",
  ifEnd: "",
  jcr: "",
  sub: "",
  selfCitingRate: "all",
  compatriotRate: "all",
  isDomestic: "",
  totalReviewRatio: "all",
  categoryId: "1e78b26454e2878930f44c6a571be497",
  recommend: 0,
  selfStart: "",
  selfEnd: "",
  numberStart: "",
  numberEnd: "",
  trrl: "",
  trrr: "",
  order: "",
  orderType: "",
});
const gettableData = () => {
  getTableData(payload).then((res) => {
    tableData.value = res.data.data_original.data;
    allTotal.value = res.data.data_original.total;
    // console.log(tableData.value, 99);
  });
};
gettableData();
console.log(tableData);

//加载
//加载
const loading = ref(false);

// 监听换页加载动画
const currentChange = async (newPage) => {
  loading.value = true;
  payload.pageNum = newPage;
  try {
    const res = await getTableData(payload);
    tableData.value = res.data.data_original.data;
    allTotal.value = res.data.data_original.total;
  } catch (error) {
    console.error("加载数据失败:", error);
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>

* {
  margin: 0;
  padding: 0;
}
.header {
  height: 100%;
  .el-divider--vertical {
    height: 40px;
  }
}
.logo,
.el-menu--horizontal.el-menu {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-main {
  .el-row {
    display: flex;
    justify-content: center;
    .el-col {
      margin-bottom: 15px;
    }
    .el-col-10 {
      border: 1px solid #0fa4b3;
      .el-icon {
        width: 100%;
        height: 100%;
      }
    }
    .el-col-20 {
      font-size: 14px;
      color: #606266;
      border: 0;
    }
  }
}

.selectnot::v-deep(.el-select__wrapper) {
  box-shadow: none !important; 
}
.el-select::v-deep(.el-select__wrapper) {
  height: 100%
}

.common-layout {
  ::v-deep(.el-container) {
    .cur-table-box {
      td.el-table__cell {
        padding: 12px 0 !important;
        div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: normal;
          word-break: break-all;
          line-height: 23px;
          padding-left: 10px;
          padding-right: 10px;

          .full_name {
            color: #303133;
            word-break: normal;

            &:hover {
              color: #0fa4b3;
              text-decoration: underline;
            }
          }

          .abbr {
            margin-top: 10px;
            color: #909399;
            word-break: normal;
          }
        }
      }
    }
  }
}


</style>

<style lang="less" scoped>
@import url(//at.alicdn.com/t/font_1548836_ogfpsjkpu8b.css);
.header {
  border-bottom: 1px solid #dcdfe6;
  background-color: #fff;
}

.header .header_content {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 51px;
  width: 1280px;
  padding: 0 50px;
  margin: 0 auto;
}

.header .header_content .logo_box,
.header .header_content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .header_content .logo_box .topEdit_logo_a {
  margin-top: 4px;
}

.header .header_content .logo_box .topEdit_logo_a .topEdit_logo {
  width: 115px;
  height: 26px;
  line-height: 26px;
  font-size: 26px;
  color: #0083ca;
  cursor: pointer;
}

.header .header_content .logo_box .line {
  width: 1px;
  height: 30px;
  background: rgba(0, 0, 0, 0.2);
  margin: 0 16px;
}

.header .header_content .logo_box .iJournal_logo {
  width: 82px;
  height: 26px;
  line-height: 26px;
  font-size: 26px;
  color: #0fa4b3;
  margin-bottom: 4px;
  cursor: pointer;
}

// 布局
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  text-align: center;
  min-height: 36px;
}
//符合型输入框
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
//加载组件
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>
